<%-- 
    Document   : adminTools
    Created on : Aug 5, 2009, 11:31:28 AM
    Author     : david
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"
        import="com.google.appengine.api.users.UserService,
        com.google.appengine.api.users.UserServiceFactory, java.util.logging.Logger,
        com.appspot.nnaplanner.DAL.*, java.util.ArrayList, com.appspot.nnaplanner.*" %>

<%

%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>nnap - Demos</title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAM8o2I5tj16bQKMUb2eWgghTzyIyaiIcyVAbEGxsZymrytUhO-RS_jxXPLwrxa4PlQ_8lIjxxYUWbKw"></script>
        <link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css"/>
        <style type="text/css" media="screen">@import url(/styles/main.css);</style>
        <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>



    </head>
    <body>
        <div class="header">
            <%@include file="Header.jspf" %>
            <%@include file="Authenticator.jspf" %>

        </div>

        <br>

        <script>
            Ext.onReady(function(){
                
                var tabs = new Ext.TabPanel({
                    renderTo: 'demos',
                    width:'100%',
                    height:'550px',
                    activeTab: 0,
                    plain:true,
                    defaults:{autoHeight: true},
                    items:[
                        {contentEl:'activeRegion', title: 'Active Stops'},
                        {contentEl:'browser', title: 'Web Browser Demo'}
                    ]
                });

                

                var store = new Ext.data.JsonStore({
                    root: 'stops',
                    totalProperty: 'total',
                    idProperty: 'stopid',
                    remoteSort: true,
                    
                    fields: [
                        'name', 'description', 'latitude', 'longitude',
                        {name: 'connections', type: 'int'}
                    ],

                    // load using script tags for cross domain, if the data in on the same domain as
                    // this page, an HttpProxy would be better
                    proxy: new Ext.data.HttpProxy({
                        url: 'allStops.jsp'
                    })
                });
                store.setDefaultSort('name', 'asc');
                var pager = new Ext.PagingToolbar({
                    pageSize: 20,
                    store: store,
                    renderTo:'stopPager',
                    displayInfo: true,
                    displayMsg: 'Displaying Stops {0} - {1} of {2}',
                    emptyMsg: "No Stops Found"        
                })
                

                    
                    
                // Creates a marker whose info window displays the letter corresponding
                // to the given index.
                function createMarker(point, title) {
                    var marker = new GMarker(point);
                    GEvent.addListener(marker, "click", function() {
                        marker.openInfoWindowHtml(title);
                    });
                    return marker;
                }


                if (GBrowserIsCompatible()) {
                    map = new GMap2(document.getElementById("map_canvas"));

                    map.setCenter(new GLatLng(51.471782, -2.634487), 12);
                    map.addControl(new GSmallMapControl());
                    map.addControl(new GMapTypeControl());
                    polygon = new GPolygon([
                        new GLatLng(51.501701,-2.700834),
                        new GLatLng(51.495289,-2.679205),
                        new GLatLng(51.490854,-2.676029),
                        new GLatLng(51.490266,-2.669764),
                        new GLatLng(51.491709,-2.665987),
                        new GLatLng(51.492671,-2.655602),
                        new GLatLng(51.494755,-2.645302),
                        new GLatLng(51.492778,-2.636375),
                        new GLatLng(51.486044,-2.629337),
                        new GLatLng(51.480859,-2.619982),
                        new GLatLng(51.478026,-2.614746),
                        new GLatLng(51.468189,-2.610884),
                        new GLatLng(51.462735,-2.606592),
                        new GLatLng(51.463056,-2.599125),
                        new GLatLng(51.459098,-2.597237),
                        new GLatLng(51.455408,-2.597408),
                        new GLatLng(51.453911,-2.605648),
                        new GLatLng(51.456852,-2.610798),
                        new GLatLng(51.460061,-2.611914),
                        new GLatLng(51.465515,-2.613974),
                        new GLatLng(51.477438,-2.619553),
                        new GLatLng(51.478293,-2.62393),
                        new GLatLng(51.478186,-2.651482),
                        new GLatLng(51.483157,-2.681351),
                        new GLatLng(51.492243,-2.693796),
                        new GLatLng(51.501701,-2.700834)

                    ], "#ff04d9", 5, 1, "#5800F4", 0.2);

                    map.addOverlay(polygon);

                }


                store.on('load', function(astore, records, options) {
                    if (map) {
                        map.clearOverlays();
                        map.addOverlay(polygon);
                        for(var i =0; i< records.length; i++) {
                        
                            var field = records[i];
                            //var stopname = field.data.name;
                        
                        
                            var location = new GLatLng(field.data.latitude, field.data.longitude);
                            var marker = createMarker(location, '<b>' + field.data.name + '</b><br />' +field.data.description);
                            map.addOverlay(marker);

                            
                        
                        
                            //var record = agrid.getStore().getAt(rowIndex);
                            //window.location.href='editConnection.jsp?id=' +record.get('id');
                        }
                    }

                });

                store.load({params:{start:0, limit:200}});
              
            } );


            //http://maps.google.com/?ie=UTF8&ll=,&spn=0.00158,0.004801&t=h&z=18

        </script>

        <div id="demos" >
            <div id="activeRegion" class="x-hide-display">
                <div style="padding:2px">
                    <div id="map_canvas" style="height:550px"></div>
                    <div id="stopPager"></div>
                </div>
            </div>
            <div id="browser" class="x-hide-display">
                <div style="padding:10px">
                    <iframe src ="routeFinder.jsp" width="100%" height="550px">
                        <p>Your browser does not support iframes, but don't worry!
                            You can still <a href="routeFinder.jsp"> see this page over here</a>

                        </p>

                    </iframe>
                </div>
            </div>
        </div>
    </body>
</html>
